<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>消息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript"
            src="../lib/vue/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/global.js"></script>
    <script type="text/javascript" src="../js/store.js"></script>
    <script type="text/javascript" src="../js/cookies.js"></script>
    <script src="../lib/vue/vue.min.js"></script>
    <script src="../lib/vue/axios.min.js"></script>
</head>
<body>
<div class="layui-fluid" id="app">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">新消息</li>
                <li>历史消息</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <button class="layui-btn layui-btn-normal" data-type="readyAll" style="margin-left:10px;"><i
                            class="layui-icon">&#xe66c;</i>批量标记已读
                    </button>
                    <table id="newMessageList" lay-filter="newMessageList"></table>
                </div>
                <div class="layui-tab-item">
                    <table id="allMessageList" lay-filter="allMessageList"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="newMessageBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="allMessageBar">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="changeUnRead">标记为未读</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="showMsg">
    <span title="点击查看详情"><a href="javascript:;">{{d.title}}</a></span>
</script>
<script>
    layui.use(['layer', 'table'], function () {
        var layer = layui.layer,
            table = layui.table;
        var newMessageTable = table.render({
            elem: '#newMessageList'
            , url: _hostUrl + '/msgs'  //数据接口
            , request: {
                pageName: 'pageIndex' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'checkbox', title: 'checkbox', width: 40, checkbox: true, align: 'center'}
                , {field: 'id', title: 'ID', width: 80, align: 'center'}
                , {
                    field: 'fromUserName', title: '消息来源', width: 150, align: 'center'
                }
                , {
                    field: 'msgType', title: '消息类型', width: 150, align: 'center', templet:
                        function (d) {
                            var msgType = d.msgType;
                            switch (msgType) {
                                case 1:
                                    msgType = "组件申请";
                                    break;
                                case 2:
                                    msgType = "审核反馈";
                                    break;
                                case 3:
                                    msgType = "组件更新";
                                    break;
                                case 4:
                                    msgType = "组件版本更新";
                                    break;
                                default:
                                    msgType = "未定义";
                                    break;
                            }
                            return msgType;
                        }
                }
                , {
                    field: 'title', title: '消息标题', width: 380, align: 'center', event: 'detail',
                    templet: "#showMsg"
                }
                , {
                    field: 'sendTime', title: '发送时间', width: 180, align: 'center'
                }
                , {title: '操作', fixed: 'right', align: 'center', toolbar: '#newMessageBar'}
            ]]
            , response: {
                statusName: 'responseCode' //数据状态的字段名称，默认：code
                , statusCode: 200 //成功的状态码，默认：0
                , msgName: 'responseMsg' //状态信息的字段名称，默认：msg
                , rootName: 'data'
                , countName: 'totalRecord'
                , dataName: 'resultList'
            }
        });
        var allMessageTable = table.render({
            elem: '#allMessageList'
            , url: _hostUrl + '/msgs'  //数据接口
            , where: {
                readFlag: 1
            }
            , request: {
                pageName: 'pageIndex' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, align: 'center'}
                , {
                    field: 'fromUserName', title: '消息来源', width: 150, align: 'center'
                }
                , {
                    field: 'msgType', title: '消息类型', width: 150, align: 'center', templet:
                        function (d) {
                            var msgType = d.msgType;
                            switch (msgType) {
                                case 1:
                                    msgType = "组件申请";
                                    break;
                                case 2:
                                    msgType = "审核反馈";
                                    break;
                                case 3:
                                    msgType = "组件更新";
                                    break;
                                case 4:
                                    msgType = "组件版本更新";
                                    break;
                                default:
                                    msgType = "未定义";
                                    break;
                            }
                            return msgType;
                        }
                }
                , {
                    field: 'title', title: '消息标题', width: 380, align: 'center', event: 'detail',
                    templet: "#showMsg"
                }

                , {
                    field: 'sendTime', title: '发送时间', width: 250, align: 'center'
                }
                , {title: '操作', fixed: 'right', align: 'center', toolbar: '#allMessageBar'}
            ]]
            , response: {
                statusName: 'responseCode' //数据状态的字段名称，默认：code
                , statusCode: 200 //成功的状态码，默认：0
                , msgName: 'responseMsg' //状态信息的字段名称，默认：msg
                , rootName: 'data'
                , countName: 'totalRecord'
                , dataName: 'resultList'
            }
        });
        //加入批量标记功能
        var $ = layui.$, active = {
            readyAll: function () {
                var checkedArr = new Array();
                var data = table.checkStatus('newMessageList').data;
                if (data.length === 0) {
                    layer.msg('请选择需要标记的消息!', {icon: 2, time: 1500})
                    return false
                }
                for (var i = 0; i < data.length; i++) {
                    checkedArr[i] = data[i].id;
                }
                var ids = checkedArr.join(',');
                $.putJSON(_hostUrl + "/msgs/" + ids
                    , null, function (res) {
                        if (res.responseCode == 201) {
                            layer.msg('您已标记成功！', {
                                icon: 1,
                                time: 2000
                            });
                            table.reload('newMessageList', {
                                page: {curr: 1}
                            });
                            //重新渲染历史消息表
                            allMessageTable.reload();
                        } else {
                            layer.msg(res.responseMsg, {icon: 2, time: 1500})
                        }
                    })
            }
        };
        //加入一键标记功能回调
        $('.layui-tab-content .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        table.on('tool(newMessageList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    type: 1
                    ,
                    title: false //不显示标题栏
                    ,
                    closeBtn: false
                    ,
                    area: '500px;'
                    ,
                    shade: 0.8
                    ,
                    id: 'message_layer' //设定一个id，防止重复弹出
                    ,
                    btn: ['关闭当前']
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 1 //拖拽模式，0或者1
                    ,
                    content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' + data.msg + '</div>'
                    ,
                    success: function (layero) {
                        $.putJSON(_hostUrl + "/msgs/" + data.id
                            , null, function (res) {
                                table.reload('newMessageList');
                                //重新渲染历史消息表
                                allMessageTable.reload();
                            })
                        /*let url
                        if (data.msgType === 1) {
                            url = "./requestion-list.html"
                        } else if (data.msgType === 4) {
                            url = "./api-detail.html?id=" + parseInt(data.otherMsg)
                        } else {
                            return false
                        }
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: url
                            , target: '_blank'
                        });
                        return false;*/
                    }
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除消息吗?', function (index) {
                    $.deleteJSON(_hostUrl + "/msg/" + data.id
                        , null, function (res) {
                            if (res.responseCode == 204) {
                                layer.msg('删除成功', {
                                    icon: 1,
                                    time: 2000
                                });
                                table.reload('newMessageList');
                            } else {
                                layer.msg(res.responseMsg, {icon: 2, time: 1500})
                            }
                        })
                })
            }
        });


        table.on('tool(allMessageList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    type: 1
                    ,
                    title: false //不显示标题栏
                    ,
                    closeBtn: false
                    ,
                    area: '500px;'
                    ,
                    shade: 0.8
                    ,
                    id: 'message_layer' //设定一个id，防止重复弹出
                    ,
                    btn: ['关闭当前']
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 1 //拖拽模式，0或者1
                    ,
                    content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' + data.msg + '</div>'
                    ,
                    success: function (layero) {
                        $.putJSON(_hostUrl + "/msgs/" + data.id
                            , null, function (res) {
                                table.reload('newMessageList');
                                //重新渲染历史消息表
                                allMessageTable.reload();
                            })
                       /* let url
                        if (data.msgType === 3) {
                            url = "./contract-detail.html?id=" + parseInt(data.otherMsg)
                        } else if (data.msgType === 4) {
                            url = "./api-detail.html?id=" + parseInt(data.otherMsg)
                        } else {
                            return false
                        }
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: url
                            , target: '_blank'
                        });
                        return false;*/
                    }
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除消息吗?', function (index) {
                    $.deleteJSON(_hostUrl + "/msg/" + data.id
                        , null, function (res) {
                            if (res.responseCode == 204) {
                                layer.msg('删除成功', {
                                    icon: 1,
                                    time: 2000
                                });
                                table.reload('allMessageList');
                            } else {
                                layer.msg(res.responseMsg, {icon: 2, time: 1500})
                            }
                        })
                })
            } else if (obj.event === 'changeUnRead') {
                $.putJSON(_hostUrl + "/msg/" + data.id
                    , null, function (res) {
                        table.reload('newMessageList');
                        //重新渲染历史消息表
                        allMessageTable.reload();
                    })
                return false;
            }
        })
    })
    ;
</script>
</body>
</html>